<template>
  <el-dialog
    title="合同详情"
    :visible.sync="dialogFormVisible"
    @close="close"
    width="80%"
    class="readonly"
    :destroy-on-close="true"
  >
    <el-form :model="form" ref="form" :rules="rules">
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item prop="name" label="项目名称">
            <el-input
              size="medium"
              v-model="$route.query.xmmc"
              disabled
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item prop="ht_mc" label="合同名称">
            <el-input
              size="medium"
              v-model.trim="form.ht_mc"
              autocomplete="off"
              :disabled="$route.query.is_sealed == 2"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item prop="ht_bh" label="合同编号">
            <el-input
              size="medium"
              v-model.trim="form.ht_bh"
              autocomplete="off"
              :disabled="$route.query.is_sealed == 2"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="ssbd_id" label="所属标段">
            <el-select
              size="medium"
              v-model="form.ssbd_id"
              placeholder="请选择"
              @change="ssbd($event)"
              style="width: 100%"
              :disabled="$route.query.is_sealed == 2"
            >
              <el-option
                :label="item.bdmc"
                :value="item.id.toString()"
                v-for="item in Bds"
                :key="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item prop="jfdw" label="甲方单位">
            <el-input
              size="medium"
              v-model.trim="form.jfdw"
              autocomplete="off"
              :disabled="$route.query.is_sealed == 2"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item prop="yfdw" label="乙方单位">
            <el-input
              size="medium"
              v-model="yfdw"
              autocomplete="off"
              disabled
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item prop="ht_qdrq" label="合同签订日期">
            <el-date-picker
              value-format="yyyy-MM-dd"
              size="medium"
              v-model="form.ht_qdrq"
              type="date"
              placeholder="选择日期"
              style="width: 100%"
              :disabled="$route.query.is_sealed == 2"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="ht_je" label="合同金额（万元）">
            <el-input
              size="medium"
              v-model.trim="form.ht_je"
              autocomplete="off"
              :disabled="$route.query.is_sealed == 2"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item prop="name" label="项目经理">
            <el-input
              size="medium"
              v-model="xmjl_obj.xm"
              autocomplete="off"
              disabled
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="name" label="联系电话">
            <el-input
              size="medium"
              v-model="xmjl_obj.lxdh"
              autocomplete="off"
              disabled
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row class="d-flex">
        <el-col :span="24">
          <el-form-item prop="bz" label="备注">
            <el-input
              size="medium"
              v-model.trim="form.bz"
              placeholder="未完成原因/特殊情况说明"
              :disabled="$route.query.is_sealed == 2"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <el-row :gutter="20" class="d-end">
      <el-col :span="24" class="d-direct">
        <span style="height: 50px;" class="d-start"
          >合同书</span
        >
        <!-- <div class="click d-center">上传附件</div> -->
        <uploader
          :fileslists="fileslist"
          :options="options"
          :file-status-text="statusText"
          :fileurl="this.$updata"
          class="uploader-example"
          ref="uploader"
          @file-success="fileSuccess"
          @file-remove="remove"
          :app="$route.query.is_sealed == 1"
        ></uploader>
        <!-- <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt />
        </el-dialog>-->
      </el-col>
    </el-row>
    <div slot="footer" class="dialog-footer">
      <el-button size="medium" @click="dialogFormVisible = false"
        >取 消</el-button
      >
      <el-button
        size="medium"
        type="primary"
        @click="save"
        v-if="$route.query.is_sealed == 1"
        :loading="loading"
        >保 存</el-button
      >
    </div>
  </el-dialog>
</template>

<script>
import mixinsFile from "@/mixins/uploadFile.js";

export default {
  mixins: [mixinsFile],
  props: ["dialogFormVisible1", "item", "Bd"],
  data() {
    return {
      form: {},
      formLabelWidth: "150px",
      dialogFormVisible: false,
      rules: {
        // ht_mc: [{ required: true, message: "该值不能为空", trigger: "blur" }],
        // ht_bh: [{ required: true, message: "该值不能为空", trigger: "blur" }],
        // ssbd_id: [{ required: true, message: "该值不能为空", trigger: "blur" }],
        // jfdw: [{ required: true, message: "该值不能为空", trigger: "blur" }],
        // ht_qdrq: [{ required: true, message: "该值不能为空", trigger: "blur" }],
        // ht_je: [{ required: true, message: "该值不能为空", trigger: "blur" }],
      },
      loading: false,
      zbdw_obj: {}, //乙方单位
      xmjl_obj: {},
      fileslist: [],
      ssbdmc: "",
      Bds: [],
      options: {
        target: this.$updata + "/api/index/uploads", // '//jsonplaceholder.typicode.com/posts/',
        testChunks: false,
      },
      statusText: {
        success: "成功了",
        error: "出错了",
        uploading: "上传中",
        paused: "暂停中",
        waiting: "等待中",
      }, //上传
      saveHide: false,
    };
  },
  methods: {
    close() {
      this.$refs.form.resetFields();

      this.$emit("close", this.saveHide);
    },
    ssbd(item) {
      this.$refs.form.clearValidate("ssbd_id");

      this.Bds.forEach((v) => {
        if (v.id == item) {
          this.zbdw_obj = v.zbdw_obj;
          this.ssbdmc = v.ssbdmc;
          if (v.xmjl_obj && v.xmjl_obj.xm && v.xmjl_obj.lxdh) {
            this.xmjl_obj = v.xmjl_obj;
          } else if (v.xmjl_obj) {
            this.xmjl_obj = {
              xm: v.xmjl_obj.xm ? v.xmjl_obj.xm : null,
              lxdh: v.xmjl_obj.lxdh ? v.xmjl_obj.lxdh : null,
            };
          } else {
            this.xmjl_obj = {
              xm: null,
              lxdh: null,
            };
          }
        }
      });
    },
    save() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.loading = true;
          //上传参数组合
          let fileUrl = this.fileslist.map((v) => {
            return v.path;
          });
          if (!this.yfdw) {
            this.$message({
              type: "error",
              message: "你所选标段无中标单位，请去标段管理设置",
            });
            this.loading = false;
            return;
          }
          this.form.files = fileUrl.join(",");
          //上传参数组合
          delete this.form.filesarr;

          this.form.xm_id = this.$route.query.xm_id;
          this.$post("/api/QqHtgl/actions", this.form).then((res) => {
            if (res.code == 200) {
              this.$message({
                message: res.msg,
                type: "success",
              });
              this.saveHide = true;
              this.dialogFormVisible = false;
            } else {
              this.$message({
                message: res.msg,
                type: "error",
              });
            }

            this.loading = false;
            console.log(this.loading);
          });
        } else {
          return false;
        }
      });
    },
    //上传组件移除返回
    remove(index) {
      this.fileslist.splice(index, 1);
    },
    //上传成功返回
    fileSuccess(rootFile, file, message, chunk) {
      if (JSON.parse(message).state == "success") {
        this.fileslist.push({
          path: JSON.parse(message).code,
          name: chunk.file.name,
        });
      } else {
        this.$message({
          message: chunk.file.name + JSON.parse(message).code,
          type: "error",
        });
      }
    },
  },
  watch: {
    dialogFormVisible1(news) {
      this.dialogFormVisible = news;
      this.Bds = [...this.Bd];
      if (news) {
        this.saveHide = false;
        this.form = this.item;
        if (this.form.ht_qdrq == "0000-00-00") this.form.ht_qdrq = "";

        this.fileslist = this.item.files ? this.item.filesarr : [];

        this.Bd.forEach((v) => {
          if (v.id == this.form.ssbd_id) {
            this.zbdw_obj = v.zbdw_obj;
            this.xmjl_obj = v.xmjl_obj;
            this.ssbdmc = v.ssbdmc;
          }
        });
      }
    },
    // item(news) {
    //   this.form = news;
    //   this.fileslist = news.files ? news.filesarr : [];

    //   this.Bd.forEach(v => {
    //     if (v.id == this.form.ssbd_id) {
    //       this.zbdw_obj = v.zbdw_obj;
    //       this.xmjl_obj = v.xmjl_obj;
    //       this.ssbdmc = v.ssbdmc;
    //     }
    //   });
    // }
    // Bd(news) {
    //   this.Bds = [...news];
    // }
  },
  mounted() {},
  computed: {
    yfdw() {
      if (this.zbdw_obj) return this.zbdw_obj.dwmc ? this.zbdw_obj.dwmc : null;
      return null;
    },
  },
};
</script>

<style scoped lang="less">
.d-direct {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
}
.title {
  width: 120px;
  padding: 10px 12px;
  font: 20px bold;
  color: #226ab6;
}
.imgUpdata {
  width: 100%;
  height: 62px;
  border: 1px solid #ccc;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  .imgList {
    height: 100%;
    width: calc(100% - 64px);
  }
  .imgBtn {
    position: absolute;
    right: 0;
    top: 0;
    width: 60px;
    height: 100%;
    background: #ccc;
    border: 1px dashed #ccc;
    flex-shrink: 0;
    cursor: pointer;
    &:hover {
      border: 1px dashed blue;
    }
  }
}
.img {
  width: 100%;
  height: 100px;
  border: 1px solid #ccc;
  i {
    img {
      width: 130px;
      height: 95px;
      padding: 5px;
    }
  }
}
.red {
  position: relative;
  &::before {
    top: 10px;
    left: 0;
    color: red;
    content: "*";
    position: absolute;
    margin-left: 4px;
    // font-weight: 700;
    line-height: 1.8em;
  }
}
</style>